<template>
	<view>
		<uv-loading-page :loading="state.pageLoading" loading-text="加载中..." font-size="24rpx"></uv-loading-page>
		<uv-form class="p-20px">
			<view class="card  p-20px bg-white rounded-20px">
				<view class="title flex flex-y-center">
					<view class="titleLine mr-10px"></view>商品信息
				</view>

				<view class="mt-20px text-28px">
					<view class="mb-20px">已选{{state.checkboxValue.length}}个商品</view>
					<uv-checkbox-group v-model="state.checkboxValue" disabled>
						<uv-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in state.checkboxList"
							:key="index" :label="item.name" :name="item.name"></uv-checkbox>
					</uv-checkbox-group>
				</view>
			</view>

			<view class="card mt-20px p-20px bg-white rounded-20px">
				<view class="title flex flex-y-center">
					<view class="titleLine mr-10px"></view>填写信息
				</view>

				<view class="mt-20px text-28px">
					<uv-form-item class="px-20px mb-20px bg-white rounded-50px" label="学员姓名:" labelWidth="80" required>
						<view class="flex">
							<view class="line mr-20px mt-2px"></view>
							<uv-input v-model="state.realName" border="none" placeholder="请输入" class="rounded-20px">
							</uv-input>
						</view>
					</uv-form-item>

					<uv-form-item class="px-20px mb-20px bg-white rounded-50px" label="手机号:" labelWidth="80" required>
						<view class="flex">
							<view class="line mr-20px mt-2px"></view>
							<uv-input v-model="state.phone" border="none" placeholder="请输入" class="rounded-20px">
							</uv-input>
						</view>
					</uv-form-item>

					<uv-form-item class="px-20px mb-20px bg-white rounded-50px" label="学员年龄:" labelWidth="80">
						<view class="flex">
							<view class="line mr-20px mt-2px"></view>
							<uv-input v-model="state.age" border="none" placeholder="请输入" class="rounded-20px">
							</uv-input>
						</view>
					</uv-form-item>

					<uv-form-item class="px-20px mb-20px bg-white rounded-50px" label="学员类型:" labelWidth="80">
						<view class="flex">
							<view class="line mr-20px mt-2px"></view>
							<uv-radio-group v-model="state.stuType">
								<uv-radio :customStyle="{margin: '8px'}" v-for="(item, index) in state.stuTypeList"
									:key="index" :label="item.name" :name="item.name">
								</uv-radio>
							</uv-radio-group>
						</view>

					</uv-form-item>
				</view>
			</view>
		</uv-form>

		<view class="footer">
			<uv-button text="提交" color="black" shape="circle" @click="submitHandle"></uv-button>
			<view class="mt-20px flex flex-x-center text-28px">
				<view class="w-100px">
					<uv-checkbox-group v-model="state.read" style="flex:0">
						<uv-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in state.readList"
							:key="index" :label="item.name" :name="item.name"></uv-checkbox>
					</uv-checkbox-group>
				</view>
				我已阅读并同意 <text class="color-blue" @click="readHandle">《个人隐私政策》</text>
			</view>

			<uv-toast ref="toast"></uv-toast>
		</view>
	</view>
</template>

<script setup name="Edit">
	import {
		ref,
		reactive,
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		changeOrderApi,
	} from '/http/index.js';

	const actionsRef = ref()
	const state = reactive({
		pageLoading: false,
		checkboxValue: ['硬笔书法(6-12岁)'],
		// 基本案列数据
		checkboxList: [{
			name: '硬笔书法(6-12岁)',
			disabled: false
		}, {
			name: '软笔书法(6-12岁)',
			disabled: false
		}],
		realName: '',
		phone: '',
		age: '',
		stuType: '新生',
		stuTypeList: [{
			name: '新生',
			disabled: false
		}, {
			name: '老生',
			disabled: false
		}],
		read: [],
		readList: [{
			name: '',
			disabled: false
		}]
	})

	const readHandle = () => {

	}

	onLoad((option) => {
		if (option?.data) {
			const data = JSON.parse(option.data)
			state.checkboxValue = [data.class]
			state.checkboxList = [{
				name: data.class,
				disabled: true
			}]
			state.realName = data?.name
			state.phone = data?.phone
			state.age = data?.age
			state.stuType = data?.studentTypeName
			// 提交接口入参
			state.id = data?.id
			state.studentType = data?.studentType
		}
		console.log('修改订单', state.value);
	})

	const toast = ref()
	const submitHandle = () => {
		if (!state.read.length) {
			toast.value.show({
				message: '请先阅读个人隐私政策'
			})
			return
		}
		console.log('调用接口');
		state.pageLoading = true
		changeOrderApi({
			id: state?.id,
			studentType: state?.studentType,
			age: state?.age,
			name: state?.realName,
			phone: state?.phone
		}).then(res => {
			uni.$uv.toast('修改成功')
			state.pageLoading = false
			setTimeout(() => {
				uni.$uv.route({
					type: 'navigateBack'
				})
				// 子页面触发返回事件
				// uni.$emit('returnFromChild',data);
				uni.$emit('returnFromChild');
			}, 1000)
		}).finally(() => {
			state.pageLoading = false
		})
	}
</script>

<style lang="scss">
	page {
		background: rgb(244, 243, 248);
	}

	.titleLine {
		width: 3px;
		height: 30rpx;
		border-radius: 3px;
		background: dodgerblue;
	}

	.line {
		width: 1px;
		height: 40rpx;
		background: #dedede;
	}

	:deep(.uv-checkbox-group--row) {
		justify-content: space-around !important;
	}

	.footer {
		width: 100vw;
		padding: 20px;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		background: white;
	}
</style>